<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
Date date = new Date();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="<%=basePath%>"/>
	<title>日程管理系统</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel='stylesheet' type='text/css' href="css/reset.css" />
	<link rel='stylesheet' type='text/css' href="jquery-ui-1.7.2/themes/base/ui.all.css" />
	<link rel='stylesheet' type='text/css' href="css/jquery.weekcalendar.css" />
	<link rel='stylesheet' type='text/css' href="css/calendar-user.css" />
	<script type='text/javascript' src="jquery-ui-1.7.2/jquery-1.3.2.js"></script>
	<script type='text/javascript' src="jquery-ui-1.7.2/ui/jquery-ui.js"></script>
	<script type='text/javascript' src="js/jquery.weekcalendar-utf8.js"></script>
	<script type="text/javascript" src="js/calendar-param.js"></script>
	<script type="text/javascript" src="js/calendar-exe.js"></script>
	<script type='text/javascript' src="js/calendar-user-utf8.js"></script>
 
</head>
<body> 
	<h1>日程管理系统</h1>
	<div id="about_button_container">
		<button type="button" id="about_button">帮助</button>
	</div>
	<div id='calendar'></div>
	<div id="event_edit_container">
		<form>
			<input type="hidden" />
			<ul>
				<li>
					<span>Date: </span><span class="date_holder"></span> 
				</li>
				<li>
					<label for="start">开始时间: </label><select name="start"><option value="">Select Start Time</option></select>
				</li>
				<li>
					<label for="end">结束时间: </label><select name="end"><option value="">Select End Time</option></select>
				</li>
				<li>
					<label for="title">行程主题: </label><input type="text" name="title" />
				</li>
				<li>
					<label for="body">行程内容: </label><textarea name="body"></textarea>
				</li>
			</ul>
		</form>
	</div>
	<div id="about">
		<h2>日程管理系统</h2>
		<p>
			本系统基于 jQuery Week Calendar 开发，主要用于公司考勤，日常记事。程序美观大方，兼容市面绝大多数浏览器。
		</p>
		<h2>考勤系统 使用说明</h2>
		<p>
			在使用该程序时，请先阅读以下说明:
		</p>
		<ul class="formatted">
			<li>Adding, updating and deleting of calendar events using jquery-ui dialog. Also includes 
				additional calEvent data (body field) not defined by the calEvent data structure to show the storage 
				of the data within the calEvent</li>
			<li>Dragging and resizing of calendar events</li>
			<li>Restricted timeslot rendering based on business hours</li>
			<li>Week starts on Monday instead of the default of Sunday</li>
			<li>Allowing calEvent overlap with staggered rendering of overlapping events</li>
			<li>Use of the 'getTimeslotTimes' method to retrieve valid times for a given event day. This is used to populate
				select fields for adding, updating events.</li>
			<li>Use of the 'eventRender' callback to add a different css class to calEvents in the past</li>
			<li>Use of additional calEvent data to enforce readonly behaviour for a calendar event. See the event
				titled "i'm read-only"</li>
		</ul>
	</div>
	<!-- this input is for mark date -->
	<input type="hidden" id="mondayDateId" value=""/>
	<input type="hidden" id="sundayDateId" value=""/>
</body>
</html>
